<template>
    <el-form :model="properties" ref="formRef" :rules="formRules" labelWidth="auto">
        <el-form-item label="组件编码" prop="code">
            <el-input v-model="properties.code" placeholder="组件编码" clearable />
        </el-form-item>

        <el-form-item label="label名称" prop="labelName">
            <el-input v-model="properties.labelName" placeholder="label名称" clearable />
        </el-form-item>

        <el-form-item label="日期类型" prop="dataType">
            <el-select v-model="properties.dataType" placeholder="日期类型">
                <el-option label="年" value="year" />
                <el-option label="年 - 多选" value="years" />
                <el-option label="月" value="month" />
                <el-option label="月 - 多选" value="months" />
                <el-option label="日期" value="date" />
                <el-option label="日期 - 多选" value="dates" />
                <el-option label="日期时间" value="datetime" />
                <el-option label="周" value="week" />
                <el-option label="日期 - 范围" value="daterange" />
                <el-option label="日期时间 - 范围" value="datetimerange" />
                <el-option label="月 - 范围" value="monthrange" />
                <el-option label="年 - 范围" value="yearrange" />
            </el-select>
        </el-form-item>

        <el-form-item label="显示提示内容" prop="commonPlaceholder" v-if="!(properties.dataType === 'daterange' || properties.dataType === 'monthrange' || properties.dataType === 'yearrange' || properties.dataType === 'datetimerange')">
            <el-input v-model="properties.commonPlaceholder" placeholder="显示提示内容" clearable />
        </el-form-item>

        <el-form-item label="开始-提示内容" prop="startPlaceholder" v-if="properties.dataType === 'daterange' || properties.dataType === 'monthrange' || properties.dataType === 'yearrange' || properties.dataType === 'datetimerange'">
            <el-input v-model="properties.startPlaceholder" placeholder="开始-提示内容" clearable />
        </el-form-item>

        <el-form-item label="结束-提示内容" prop="endPlaceholder" v-if="properties.dataType === 'daterange' || properties.dataType === 'monthrange' || properties.dataType === 'yearrange' || properties.dataType === 'datetimerange'">
            <el-input v-model="properties.endPlaceholder" placeholder="结束-提示内容" clearable />
        </el-form-item>

        <el-form-item label="日期格式化" prop="format" v-if="properties.dataType !== 'week'">
            <el-input v-model="properties.format" placeholder="日期格式化 YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>

        <el-form-item label="周格式化" prop="weekFormat" v-if="properties.dataType === 'week'">
            <el-input v-model="properties.weekFormat" placeholder="日期格式化 YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="YwuFormDateDrawer">
import {computed, defineProps, ref} from "vue";

let props = defineProps(['properties']);

let properties = computed(() => {return props['properties']})

const formRef = ref(null)

const formRules = ref({
    labelName: [
        { required: true, message: '请输入label名称', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入组件编码', trigger: 'blur' }
    ],
    dataType: [
        { required: true, message: '请选择日期类型', trigger: 'blur' }
    ],
    commonPlaceholder: [
        { required: true, message: '请输入显示提示内容', trigger: 'blur' }
    ],
    startPlaceholder: [
        { required: true, message: '请输入开始-提示内容', trigger: 'blur' }
    ],
    endPlaceholder: [
        { required: true, message: '请输入结束-提示内容', trigger: 'blur' }
    ],
    format: [
        { required: true, message: '请输入日期格式化', trigger: 'blur' }
    ]
})

const validateForm = () => {
    return formRef.value?.validate()
}

defineExpose({
    validateForm
})
</script>

<style scoped lang="less">

</style>